<template>
    <a-modal v-model="visible" title="新增" @ok="handleOk">
        <a-form style="max-height: 500px; overflow-y: auto;">

            <a-form-item
                    label="账号"
                    :label-col="formItemLayout.labelCol"
                    :wrapper-col="formItemLayout.wrapperCol"
            >
                <a-input placeholder="" v-model="formData.userAccount"/>
            </a-form-item>
            <a-form-item
                label="姓名"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
            >
                <a-input placeholder="" v-model="formData.name"/>
            </a-form-item>
            <a-form-item
                label="性别"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
            >
<!--                <a-input placeholder="" v-model="formData.gender"/>-->
                <a-select v-model="formData.gender">
                    <a-select-option value="男">男</a-select-option>
                    <a-select-option value="女">女</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item
                label="职业"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
            >
                <a-input placeholder="" v-model="formData.job"/>
            </a-form-item>
            <a-form-item
                label="微信昵称"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
            >
                <a-input placeholder="" v-model="formData.microSignal"/>
            </a-form-item>
            <a-form-item
                label="团队编号"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
            >
                <a-input placeholder="" v-model="formData.teamNo"/>
            </a-form-item>
            <a-form-item
                label="团队名称"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
            >
                <a-input placeholder="" v-model="formData.teamName"/>
            </a-form-item>
            <a-form-item
                label="福利群编号"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
            >
                <a-input placeholder="" v-model="formData.welfareGroupNo"/>
            </a-form-item>
            <a-form-item
                label="福利群名称"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
            >
                <a-input placeholder="" v-model="formData.welfareGroupName"/>
            </a-form-item>
            <a-form-item
                label="职务编号"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                v-show="false"
            >
                <a-input placeholder="" v-model="formData.positionNo"/>
            </a-form-item>
            <a-form-item
                label="职务名称"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
            >
<!--                <a-input placeholder="" v-model="formData.positionName"/>-->
                <a-select v-model="formData.positionName" @change="handlePositionChange">
                    <a-select-option v-for="item in positionDict" :key="item.positionNo" :value="item.positionName">{{ item.positionName }}</a-select-option>
<!--                    <a-select-option :value="item.positionName">{{ item.positionName }}</a-select-option>-->
                </a-select>
            </a-form-item>
            <a-form-item
                label="积分"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
            >
                <a-input placeholder="" v-model="formData.integral"/>
            </a-form-item>
            <a-form-item
                label="爱好"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
            >
                <a-input placeholder="" v-model="formData.hobby"/>
            </a-form-item>
            <a-form-item
                label="特长"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
            >
                <a-input placeholder="" v-model="formData.specialty"/>
            </a-form-item>
            <a-form-item
                label="联系方式"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
            >
                <a-input placeholder="" v-model="formData.mobileNumber"/>
            </a-form-item>
            <a-form-item
                label="入群日期"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
            >
<!--                <a-input placeholder="" v-model="formData.joinDate"/>-->
                <a-date-picker  v-model="formData.joinDate" :format="dateFormat" :valueFormat="dateFormat"/>
            </a-form-item>
            <a-form-item
                label="直接上级编号"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                v-show="false"
            >
                <a-input placeholder="" v-model="formData.manageName"/>
            </a-form-item>
            <a-form-item
                label="直接上级姓名"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
            >
<!--                <a-input placeholder="" v-model="formData.manageName"/>-->
                <a-auto-complete
                        v-model="formData.manageNo"
                        style="width: 200px"
                        @search="handleUserSearch"
                        @select="handleUserSelect"
                >
                    <template slot="dataSource">
                        <a-select-option v-for="item in usersDataSource" :key="item.key" :value="item.key">{{item.label}}</a-select-option>
                    </template>
                </a-auto-complete>
            </a-form-item>
            <a-form-item
                label="是否管理人员"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
            >
<!--                <a-input placeholder="" v-model="formData.isManage"/>-->
                <a-select v-model="formData.isManage">
                    <a-select-option value="是">是</a-select-option>
                    <a-select-option value="否">否</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item
                label="管理岗位开始日期"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
            >
<!--                <a-input placeholder="" v-model="formData.manageStartDate"/>-->
                <a-date-picker  v-model="formData.manageStartDate" :format="dateFormat" :valueFormat="dateFormat"/>
            </a-form-item>
            <a-form-item
                label="管理岗位结束日期"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                >
<!--                <a-input placeholder="" v-model="formData.manageEndDate"/>-->
                <a-date-picker  v-model="formData.manageEndDate" :format="dateFormat" :valueFormat="dateFormat"/>
            </a-form-item>
            <a-form-item
                label="是否退群"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
            >
<!--                <a-input placeholder="" v-model="formData.isQuitGroup"/>-->
                <a-select v-model="formData.isQuitGroup">
                    <a-select-option value="是">是</a-select-option>
                    <a-select-option value="否">否</a-select-option>
                </a-select>

            </a-form-item>
            <a-form-item
                label="退群时间"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
            >
<!--                <a-input placeholder="" v-model="formData.quitDate"/>-->
                <a-date-picker  v-model="formData.quitDate" :format="dateFormat" :valueFormat="dateFormat"/>
            </a-form-item>
            <a-form-item
                label="退群原因"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
            >
                <a-input placeholder="" v-model="formData.quitReason"/>
            </a-form-item>
            <a-form-item
                label="备注"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
            >
                <a-input placeholder="" v-model="formData.remark"/>
            </a-form-item>
        </a-form>
    </a-modal>
</template>
<script>
import API from "../api/api_personal"
import PAPI from "../../system/role/api/api_cfg_position_integral"
export default {
    data() {
        return {
            formLayout: 'horizontal',
            visible: false,
            mode:'',
            formData: {},
            dateFormat:'YYYY-MM-DD',
            positionDict:[],
            users:[],
            usersDataSource: []
        };
    },
    computed: {
        formItemLayout() {
            const { formLayout } = this;
            return formLayout === 'horizontal'
                ? {
                    labelCol: { span: 8 },
                    wrapperCol: { span: 12 },
                }
                : {};
        },
        buttonItemLayout() {
            const { formLayout } = this;
            return formLayout === 'horizontal'
                ? {
                    wrapperCol: { span: 8, offset: 12 },
                }
                : {};
        },
    },
    methods: {
        initPosition(){
          PAPI.getDict().then(res =>{
              if (res.code === 0){
                  this.positionDict = res.list;
              }else {
                  console.log('查询职务列表异常',e);
                  this.$message.error('查询职务列表异常,请联系管理员');
              }
          }).catch(e => {
              console.log('查询职务列表异常',e);
              this.$message.error('查询职务列表异常,请联系管理员');
          })
        },
        initUsers(){
            API.getUsersDict().then(res => {
                if (res.code === 0){
                    this.users = res.list;
                    this.usersDataSource = res.list;
                }else {
                    console.log('查询职务列表异常',e);
                    this.$message.error('查询直接上级成员列表异常,请联系管理员');
                }
            }).catch(e => {
                console.log('查询职务列表异常',e);
                this.$message.error('查询直接上级成员列表异常,请联系管理员');
            })
        },
        add() {
            this.initUsers();
            this.initPosition();
            this.mode = 'add';
            this.formData = {};
            this.visible = true;
        },
        update(row){
            this.initUsers();
            this.initPosition();
            this.mode = 'edit';
            this.formData = row;
            this.visible = true;
        },
        handleOk(e) {
            let that = this;
            let func = that.mode === 'add'? API.add: API.update;
            func(that.formData).then(res =>{
                if (res.code === 0){
                    that.$message.success('操作成功')
                    that.$emit('ok')
                }else {
                    that.$message.error('操作失败,请联系管理员')
                }
            }).catch(e =>{
                that.$message.error('操作失败,请联系管理员')
            })

            that.visible = false;
        },
        handlePositionChange(value){
            let tmp = this.positionDict.filter(item => item.positionName === value);
            if (tmp.length > 0){
                this.formData.positionNo = tmp[0].positionNo;
            }
        },
        handleUserSearch(text){
            this.usersDataSource = text? this.users.filter(item => item.label.indexOf(text) > -1): this.users
        },
        handleUserSelect(value){
            let tmp = this.users.filter(item => item.key === value);
            if (tmp.length > 0){
                this.formData.manageName = tmp[0].value;
            }
        }
    },
    created() {
        // this.initPosition();
        // this.initUsers();
    }
};
</script>
